<template>
  <view class="flow_content">
    <view class="flow_title" v-if="!commonInfoStore.applet_sh">活动流程</view>
    <view class="flow_step" v-if="!commonInfoStore.applet_sh">
      <view class="step_item" v-for="(item,index) in stepList" :key="index">
        <image class="img" :src="item.imgPath"></image>
        <view class="name">{{ item.name }}</view>
      </view>
    </view>
    <view class="flow_sub_title">注意事项</view>
    <view>
<!--      <view class="top">
        <view>
          <text class="title">美团官返餐返利规则：</text>
        </view>
        <view style="display: flex;justify-content: flex-start;align-items: flex-start" >
          <view style="margin-top: 8rpx">
            <u-icon
              :name="icon"
              size="20"
              color="#ff6837"
            ></u-icon>
          </view>
          <text>按实付返利”根据实付金额*返利比例进行返利：</text>
        </view>
        <view style="display: flex;justify-content: flex-start;align-items: flex-start">
          <view style="margin-top: 8rpx">
            <u-icon
              :name="icon"
              size="20"
              color="#ff6837"
            ></u-icon>
          </view>
          <text>最高返利”按照百分比进行返利，最高不超过“最高 返利”：</text>
        </view>
      </view>-->
      <view class="bottom">
<!--        <view>
          <text>例如：活动内容为按实付80%返利，最高不超过30 实付30，返利为：30*80%=24;</text>
        </view>
        <view>
          <text>实付为40，返利为：40*80%=32,32>30所以返利为30</text>
        </view>
        <view v-for="(item,index) in rule" :key="index">
          <text>{{ item }}</text>
        </view>-->
        <u-parse :content="rule"></u-parse>
      </view>
    </view>
  </view>
</template>
<script setup>
import {ref} from "vue";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
const prop = defineProps({
  rule: {
    type: String,
  }
})
const commonInfoStore = useCommonInfoStore()
const icon = ref('star-fill')
const stepList = ref([
  {
    name: "1.抢单",
    imgPath: "https://lsz.lszbg.com/imgs/guanfan/detail/menu1.png"
  }, {
    name: "2.美团下单",
    imgPath: "https://lsz.lszbg.com/imgs/guanfan/detail/menu2.png"
  }, {
    name: "3.美团点评",
    imgPath: "https://lsz.lszbg.com/imgs/guanfan/detail/menu3.png"
  }, {
    name: "4.返利到账",
    imgPath: "https://lsz.lszbg.com/imgs/guanfan/detail/menu4.png"
  },
])
</script>
<style scoped lang="scss">
.flow_content {
  background-color: #FFFFFF;
  border-radius: 20rpx;
  margin: 30rpx;
  padding: 20rpx;
}

.flow_title {
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  text-align: left;
}

.flow_sub_title {
  font-weight: bold;
  font-size: 32rpx;
  color: #333333;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}

.flow_step {
  background-color: #FFFAEF;
  height: 180rpx;
  width: 650rpx;
  margin: 20rpx auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10rpx;
}

.step_item {
  width: 150rpx;
  text-align: center;

  image {
    width: 80rpx;
    height: 80rpx;
    margin: auto;
  }

  .name {
    margin-top: 10rpx;
    font-size: 26rpx;
  }
}
.top{
  color: #FF3E00;
  font-size: 26rpx;
  line-height: 60rpx;
  font-weight: 500;
  .title{
    font-weight: bold;
    font-size: 30rpx;
  }
}
.bottom{
  color: black;
  font-size: 26rpx;
  line-height: 60rpx;
  font-weight: 500;
}
</style>
